<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定表头</title>
</head>

<body>
    https://juejin.cn/post/7057432342234660894

    <style type="text/css">
        .wrap {
            height: 200px;
            width: 150px;
        }

        .table_wrap {
            width: 100%;
            height: 100%;
            overflow: auto;
        }

        /*
        .table_header {
            position: sticky;
            top: 0px;
            z-index: 2;
        }
        */

        table {
            border-collapse: separate;
            border-spacing: 0;
            table-layout: fixed;
        }

        table th,
        td {
            background: #ddd;
            text-align: center;
            border-right: 1px solid #000;
        }

        table th:first-child,
        td:first-child {
            border-left: 1px solid #000;
        }

        .table_header table th {
            border-top: 1px solid #000;
            border-bottom: 1px solid #000;
        }

        .table_body table tr:not(:first-child) td {
            border-top: 1px solid #000;
        }

        .td_fixed {
            position: sticky;
            left: 0px;
            z-index: 1;
            border-right: 1px solid #000;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            table-layout: fixed;
        }

        th,
        td {
            border: 1px solid #000;
            background-color: #ddd;
        }

        .td_fixed {
            position: sticky;
            left: 0px;
            z-index: 1;
        }
    </style>
    </head>

    <body>
        <div class="wrap">
            <div class="table_wrap">
                <div class="table_header">
                    <table style="width: 210px">
                        <colgroup>
                            <col style="width: 70px" />
                            <col style="width: 70px" />
                            <col style="width: 70px" />
                        </colgroup>
                        <thead>
                            <tr>
                                <th class="td_fixed">index</th>
                                <th>col1</th>
                                <th>col2</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div class="table_body">
                    <table style="width: 210px">
                        <colgroup>
                            <col style="width: 70px" />
                            <col style="width: 70px" />
                            <col style="width: 70px" />
                        </colgroup>
                        <tbody>
                            <tr>
                                <td class="td_fixed">start</td>
                                <td>1-1</td>
                                <td>2-1</td>
                            </tr>
                            <tr>
                                <td class="td_fixed">2</td>
                                <td>1-2</td>
                                <td>2-2</td>
                            </tr>
                            <tr>
                                <td class="td_fixed">3</td>
                                <td>1-3</td>
                                <td>2-3</td>
                            </tr>
                            <tr>
                                <td class="td_fixed">4</td>
                                <td>1-4</td>
                                <td>2-4</td>
                            </tr>
                            <tr>
                                <td class="td_fixed">5</td>
                                <td>1-5</td>
                                <td>2-5</td>
                            </tr>
                            <tr>
                                <td class="td_fixed">6</td>
                                <td>1-6</td>
                                <td>2-6</td>
                            </tr>
                            <tr>
                                <td class="td_fixed">7</td>
                                <td>1-7</td>
                                <td>2-7</td>
                            </tr>
                            <tr>
                                <td class="td_fixed">8</td>
                                <td>1-8</td>
                                <td>2-8</td>
                            </tr>
                            <tr>
                                <td class="td_fixed">end</td>
                                <td>1-7</td>
                                <td>2-7</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </body>

</html>